<blockquote class="layui-elem-quote">商品列表</blockquote>
<table id="goods-list" lay-filter="goods-list"></table>
<script type="text/html" id="goods-pics">
    <!--使用layui的模板语言遍历数组-->
    {{#   layui.each(d.pics, function(index,item){   }}
    <img src="/upload/{{item.url}}" style="height: 50px;">
    {{#   });                                        }}
</script>
<script type="text/html" id="goods-bar">
    <a class="layui-btn layui-btn-sm layui-btn-warm" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除</a>
</script>
<script>
    layui.use(['table'], function () {
        var table = layui.table;

        table.render({
            elem: '#goods-list',
            url: '/api/goods',
            page: true,
            cols: [[
                {field: 'id', title: 'ID'},
                {field: 'name', title: '商品名'},
                {field: 'pics', title: '图片', templet: '#goods-pics',width:250,},
                {field: 'dscp', title: '描述'},
                {field: 'price', title: '售价'},
                {field: 'markPrice', title: '标价'},
                {field: 'color', title: '颜色'},
                {field: 'version', title: '版本'},
                {field: 'count', title: '库存'},
                {
                    field: 'recom', title: '主页推荐', templet: function (d) {
                        return ['不推荐','推荐'][d.recom];
                    }
                },
                {
                    field: 'categoryId', title: '分类', templet: function (d) {
                        return d.category.name;
                    }
                },
                {
                    field: 'status', title: '状态', templet: function (d) {
                        return ['上架','下架'][d.status];
                    }
                },
                {title: '操作',toolbar:'#goods-bar'},
            ]],
            /*解析格式*/
            parseData: function (d) {
                return {
                    code: d.code,
                    msg: d.msg,
                    count: d.data.total,
                    data: d.data.list,
                };
            }
        });

        /*行工具条的点击操作*/
        table.on('tool(goods-list)',function (obj) {
            if (obj.event=='edit'){
                //向页面传递数据
                sessionStorage.setItem('goods-edit',JSON.stringify(obj.data));
                layer.open({
                    type:2,
                    title:'编辑分类',
                    area:['700px','750px'],
                    content:'/goods/edit.html',//页面的url
                    end:function () {
                        //弹出层关闭。刷新表格
                        table.reload('goods-list');
                    }
                });
            }else if (obj.event=='del'){
                layer.confirm("确认删除当前记录吗？",function (index) {
                    //关闭弹出框
                    layer.close(index);
                    //点击确定的操作，删除
                    //ajax删除
                    $.ajax({
                        url:'/api/goods',
                        data:{id: obj.data.id},
                        type:'delete',
                        dataType:'json',
                        success:function (result) {
                            if (result.code==0){
                                layer.msg('删除成功');
                            }else {
                                layer.msg(result.msg);
                            }
                            //刷新表格
                            table.reload('goods-list');
                        },
                        error:function () {
                            layer.msg("请求失败");
                        }
                    })
                })
            }
        })
    });
</script>
